Reference.render - Code Metrics - Inspection of "Merge branch 'dev' into feature/settings-2fa" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/settings-2fa ( 31e075...1e717f )

by Grant

created 2019-12-02 20:24 UTC

Reference.render B

↳ Parent: Reference

Complexity

Conditions

Size

Total Lines	60
Code Lines	53

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	53
dl	0
loc	60
rs	8.5381
c	0
b	0
f	0

How to fix Long Method

import React, { Component } from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";

export default class Reference extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      name: props.initName,
    };
    this.handleTriggerClick = this.handleTriggerClick.bind(this);
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  handleTriggerClick() {
    console.log("click");
    this.setState(state => ({
      active: !state.active,
    }));
    // this.setState({active: !this.state.active});
  }

  handleNameChange(event) {
    this.setState({
      name: event.target.value,
    });
  }

  componentDidCatch(error, info) {
    console.log(error);
    console.log(info);
  }

  render() {
    const triggerClass = classNames(
      "profile-element",
      "accordion",
      "reference",
      "modal-target-object",
      { active: this.state.active },
    );
    return (
      <div className={triggerClass}>
        <button
          aria-expanded={this.state.active}
          className="accordion-trigger"
          tabIndex="0"
          type="button"
          onClick={this.handleTriggerClick}
        >
          {this.props.showStatus && (
            <div className="accordion-status">
              <i className="fas fa-check" />
              <i className="fas fa-exclamation-circle" />
            </div>
          )}
          <span className="accordion-title">{this.props.title}</span>
        </button>

        <div aria-hidden={!this.state.active} className="accordion-content">
          <form action={this.props.url} method="POST">
            <div className="form__wrapper">
              <div className="form-error box" />
              <div className="flex-grid">
                <div className="box med-1of2">
                  <div
                    className={classNames("form__input- wrapper--float", {
                      active: this.state.name,
                    })}
                  >
                    <label
                      className="form__label"
                      htmlFor={`referenceName${this.props.id}`}
                    >
                      {this.props.lang.name_label}
                    </label>
                    <input
                      className="form__input"
                      id={`referenceName${this.props.id}`}
                      type="text"
                      name="name"
                      required
                      value={this.state.name}
                      onChange={this.handleNameChange}
                    />
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

if (document.getElementById("react-reference")) {
  ReactDOM.render(
    <Reference key="1" id="1" url="/" initName="Joe Bob" locale="profile" />,
    document.getElementById("react-reference"),
  );
}


1			import React, { Component } from "react";
2			import ReactDOM from "react-dom";
3			import classNames from "classnames";
4
5			export default class Reference extends Component {
6			constructor(props) {
7			super(props);
8			this.state = {
9			active: false,
10			name: props.initName,
11			};
12			this.handleTriggerClick = this.handleTriggerClick.bind(this);
13			this.handleNameChange = this.handleNameChange.bind(this);
14			}
15
16			handleTriggerClick() {
17			console.log("click");
18			this.setState(state => ({
19			active: !state.active,
20			}));
21			// this.setState({active: !this.state.active});
22			}
23
24			handleNameChange(event) {
25			this.setState({
26			name: event.target.value,
27			});
28			}
29
30			componentDidCatch(error, info) {
31			console.log(error);
32			console.log(info);
33			}
34
35			render() {
36			const triggerClass = classNames(
37			"profile-element",
38			"accordion",
39			"reference",
40			"modal-target-object",
41			{ active: this.state.active },
42			);
43			return (
44			<div className={triggerClass}>
45			<button
46			aria-expanded={this.state.active}
47			className="accordion-trigger"
48			tabIndex="0"
49			type="button"
50			onClick={this.handleTriggerClick}
51			>
52			{this.props.showStatus && (
53			<div className="accordion-status">
54			<i className="fas fa-check" />
55			<i className="fas fa-exclamation-circle" />
56			</div>
57			)}
58			<span className="accordion-title">{this.props.title}</span>
59			</button>
60
61			<div aria-hidden={!this.state.active} className="accordion-content">
62			<form action={this.props.url} method="POST">
63			<div className="form__wrapper">
64			<div className="form-error box" />
65			<div className="flex-grid">
66			<div className="box med-1of2">
67			<div
68			className={classNames("form__input- wrapper--float", {
69			active: this.state.name,
70			})}
71			>
72			<label
73			className="form__label"
74			htmlFor={`referenceName${this.props.id}`}
75			>
76			{this.props.lang.name_label}
77			</label>
78			<input
79			className="form__input"
80			id={`referenceName${this.props.id}`}
81			type="text"
82			name="name"
83			required
84			value={this.state.name}
85			onChange={this.handleNameChange}
86			/>
87			</div>
88			</div>
89			</div>
90			</div>
91			</form>
92			</div>
93			</div>
94			);
95			}
96			}
97
98			if (document.getElementById("react-reference")) {
99			ReactDOM.render(
100			<Reference key="1" id="1" url="/" initName="Joe Bob" locale="profile" />,
101			document.getElementById("react-reference"),
102			);
103			}
104

GCTC-NTGC / TalentCloud

Push — feature/settings-2fa ( 31e075...1e717f )

Reference.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like